<template>
	<div class="todo-container">
		<div class="todo-wrap">
			<Add v-bind:addTodo="addTodo"/>
			<List v-bind:todos="todos" v-bind:delTodo="delTodo"/>
			<Lower v-bind:delComplete="delComplete" v-bind:allExe="allExe" v-bind:todos="todos"/>
		</div>
  </div>
</template>

<script>
	import Add from './components/Add.vue'
	import List from './components/List.vue'
	import Lower from './components/Lower.vue'
	export default {
		components:{
			Add, List, Lower
		},
		// 定义数组
		data() {
			return{
				/* 
				*  数据的存储：从localStorage读取数据
				*/
				todos:JSON.parse(window.localStorage.getItem("todos_key") || '[]')
			}
		},
		methods:{
			addTodo(obj) {
				this.todos.unshift(obj);
			},
			delTodo(index) {
				this.todos.splice(index, 1);
			},
			// 删除所有已完成的任务
			delComplete() {
				// 1. 过滤数组，仅保留flog为true的数据传递过去即可
				const newTodos = this.todos.filter(todo => !todo.flog);
				if(window.confirm("确定要清除已完成的" + (this.todos.length - newTodos.length) + "个任务么？")) {
					this.todos = newTodos;
				}
			},
			// 全选全部选函数
			allExe(check) {
				this.todos.forEach(todo => todo.flog = check);
			}
		},
		
		watch:{ // 监听
			todos:{
				deep:true, //开启深度监听
				handler:function(value){
					// 将todos最新的值的JSON数据，保存到localStorage中去
					window.localStorage.setItem("todos_key", JSON.stringify(value));
				}
			}
		}
	}
</script>

<style>
.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>
